<template>
	<view>
		<u-popup :show="popuo_show" round="20rpx" @close="onClose()" mode="bottom" bgColor="#ffffff" zIndex="998" :overlayStyle="{zIndex:997}">
			<view class="select-wrap">
				<view class="title-line">
					<text class="title">新增地址</text>
					<image src="@/static/images/close.png" class="close-ioc" @click="onCancelAdd()"></image>
				</view>
				<view class="form-view">
					<view class="line">
						<text class="label">姓名</text>
						<view class="right">
							<view class="line-bg">
								<input type="text" v-model="name" placeholder="请输入姓名" class="input" />
							</view>
							<text class="tips">请填写真实姓名,以免信息重复。</text>
						</view>
					</view>
					<view class="line">
						<text class="label">手机号</text>
						<view class="right">
							<view class="line-bg">
								<input type="tel" v-model="mobile" placeholder="请输入手机号" class="input" />
							</view>
						</view>
					</view>
					<view class="line">
						<text class="label">省市区</text>
						<view class="right right-row">
							<view class="line-bg">
								<picker @change="onProvinceChange" :range="province_list" range-key="label" :disabled="province_list.length == 0">
									<view class="select-line">
										<input type="text" :value="province_name" placeholder="选择省" class="input" disabled />
										<image src="@/static/images/select.png" class="select-ioc"></image>
									</view>
								</picker>
							</view>
							<view class="line-bg">
								<picker @change="onCityChange" :range="city_list" range-key="label" :disabled="city_list.length == 0">
									<view class="select-line">
										<input type="text" :value="city_name" placeholder="选择市" class="input" disabled />
										<image src="@/static/images/select.png" class="select-ioc"></image>
									</view>
								</picker>

							</view>
							<view class="line-bg">
								<picker @change="onAreaChange" :range="area_list" range-key="label" :disabled="area_list.length == 0">
									<view class="select-line">
										<input type="text" :value="area_name" placeholder="选择区" class="input" disabled />
										<image src="@/static/images/select.png" class="select-ioc"></image>
									</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="line">
						<text class="label">详细地址</text>
						<view class="right">
							<view class="line-bg">
								<textarea placeholder="请输入" v-model="address" class="textarea"></textarea>
							</view>
						</view>
					</view>
				</view>

				<view class="btn-view">
					<button class="btn" @click="onAddAddress()">保 存</button>
				</view>
			</view>
			<i-toast ref="iToast"></i-toast>
			<u-toast ref="uToast"></u-toast>
			<confirm ref="quit" content="退出将不会保存您的修改\n是否退出？" @confirm="onClose()"></confirm>
		</u-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				popuo_show: false,
				name: "",
				mobile: "",
				address: "",

				province_list: [],
				province_name: "",
				province_id: "",

				city_list: [],
				city_name: "",
				city_id: "",

				area_list: [],
				area_name: "",
				area_id: "",
			};
		},
		methods: {
			show() {
				this.name = ""
				this.mobile = ""
				this.address = ""
				this.province_name = ""
				this.province_id = ""
				this.city_list = []
				this.city_name = ""
				this.city_id = ""
				this.area_list = []
				this.area_name = ""
				this.area_id = ""
				this.popuo_show = true;
				this.getProvinceList() //获取省列表
			},

			getProvinceList() {
				this.api.post("/api/common/area").then(res => {
					console.log(res);
					this.province_list = res
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})

			},
			getCityList() {
				const params = {
					province: this.province_id
				}
				this.api.post("/api/common/area", { params: params }).then(res => {
					this.city_list = res
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			getAreaList() {
				const params = {
					city: this.city_id
				}
				this.api.post("/api/common/area", { params: params }).then(res => {
					this.area_list = res
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			//选择了省
			onProvinceChange(e) {
				const active = this.province_list[e.detail.value]
				this.province_name = active.label
				this.province_id = active.value
				this.city_list = [];
				this.area_list = [];
				this.city_name = ""
				this.city_id = ""
				this.area_name = ""
				this.area_id = ""
				this.getCityList()

			},
			//选择市
			onCityChange(e) {
				const active = this.city_list[e.detail.value]
				this.city_name = active.label
				this.city_id = active.value
				this.area_list = [];
				this.area_name = ""
				this.area_id = ""
				this.getAreaList()
			},
			//选择县
			onAreaChange(e) {
				const active = this.area_list[e.detail.value]
				this.area_name = active.label
				this.area_id = active.value
			},

			onClose() {
				this.popuo_show = false;
				this.$emit("close");
			},

			onAddAddress() {
				if (!this.name) return this.fail("请输入姓名")
				if (!this.mobile) return this.fail("请输入手机号")
				if (this.$u.test.mobile(this.mobile) === false) return this.fail("请输入正确的手机号")
				if (!this.province_id) return this.fail("请选择省")
				if (!this.city_id) return this.fail("请选择市")
				if (!this.area_id) return this.fail("请选择县")
				if (!this.address) return this.fail("请输入详细地址")

				const params = {
					receiver: this.name,
					mobile: this.mobile,
					address: this.address,
					area_id: this.area_id,
				}
				this.api.post("/api/address/addedit", { params: params }).then(res => {
					this.$refs.iToast.show("添加成功")
					setTimeout(() => {
						this.$emit("seccess")
						this.onClose()
					}, 800)
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			onCancelAdd() {
				this.$refs.quit.show()
			}
		},

	}
</script>

<style lang="scss" scoped>
	.select-wrap {
		display: flex;
		flex-direction: column;

		.title-line {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
			border-bottom: 1px solid #E5E5E5;

			.title {
				font-size: 32rpx;
				color: #333333;
			}

			.close-ioc {
				position: absolute;
				right: 30rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.form-view {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 30rpx 0rpx;
		margin-top: 10rpx;

		.line {
			display: flex;
			align-items: flex-start;
			margin-top: 26rpx;

			.label {
				line-height: 84rpx;
				font-size: 28rpx;
				color: #333333;
				width: 130rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				flex: 1;

				.line-bg {
					position: relative;
					flex: 1;
					display: flex;
					align-items: center;
					background: #FAFAFA;
					border-radius: 12rpx;
					margin-right: 16rpx;

					.input {
						height: 84rpx;
						padding-left: 26rpx;
						flex: 1;
					}

					uni-picker {
						flex: 1;
					}

					.select-line {
						display: flex;
						align-items: center;

						.select-ioc {
							width: 20rpx;
							height: 20rpx;
							margin-right: 16rpx;
						}
					}

					.textarea {
						padding: 28rpx;
						font-size: 28rpx;
						height: 180rpx;
						width: 100%;
					}
				}


				.line-bg:last-child {
					margin-right: 0;
				}

				.tips {
					font-size: 24rpx;
					margin-top: 10rpx;
					padding-left: 10rpx;
					color: #333;
				}
			}

			.right-row {
				flex-direction: row;
			}
		}

	}

	.btn-view {
		padding: 30rpx 30rpx;
	}
</style>